<style lang="less" scoped>
.api table {
  font-family: Consolas, Menlo, Courier, monospace;
  font-size: 12px;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #e9e9e9;
  width: 100%;
  margin-bottom: 24px
}

.api table th {
  background: #f7f7f7;
  white-space: nowrap;
  color: #5c6b77;
  font-weight: 600
}

.api table td,
.api table th {
  border: 1px solid #e9e9e9;
  padding: 8px 16px;
  text-align: left
}

.api table td ul li {
  font-size: 12px!important
}

.carddemo {
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  &.simpledemo{
    padding:0 20px;
    .iconwrap{
      background:#1875F0;
      border:none;
    }
    .bar{
      height:45px;
      li{
        list-style:none;
        width:5px;
        margin:0 1px;
        display:inline-block;
        vertical-align:bottom;
        &:nth-child(even) {background:#1875F0;}
        &:nth-child(odd) {background:#EAEFF2;}
      }
    }
  }
  &.complex{
    flex-wrap:wrap;
    .item{
      margin:10px 0;
      width:50%;
    }
    .iconwrap {
      border: none;
      border-radius:40px;
      width:40px;
      height:40px;
      line-height: 40px;
      margin-right: 10px;
    }
    h1{
      font-size:13px;
      color:#808080;
    }
    .proname{
      font-size:11px;
      color:#ccc;
    }
  }
  .item {
    display: flex;
    align-items: center;
  }
  .iconwrap {
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 66px;
    border: 2px solid rgba(245, 245, 245, 1);
    border-radius: 60px;
    margin-right: 15px;
  }
  h1 {
    font-size: 24px;
    color: #808080;
    font-family: Roboto-Bold;
  }
  .proname {
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Semibold;
    color: rgba(179, 179, 179, 1);
    line-height: 20px;
  }
}


</style>
<template>
  <div>
    <article>
      <h1>Card 卡片</h1>
      <Anchor title="概述" h2></Anchor>
      <p>基础容器，用来显示文字、列表、图文等内容，也可以配合其它组件一起使用。</p>
      <Anchor title="代码示例" h2></Anchor>
      <Demo title="基本用法">
        <div slot="demo">
          <Card style="width:400px">
            <p slot="title">
              <Icon type="social-buffer"></Icon>
              替代文字标题
            </p>
            <a href="#" slot="extra" @click.prevent="changeLimit">
              <Icon type="ios-loop-strong"></Icon>
            </a>
            <div class="carddemo">
              <div class="item">
                <div class="iconwrap">
                  <Icon size="24" color="#1875F0" type="all-user"></Icon>
                </div>
                <div class="iteminfo">
                  <h1>{{usercount}}</h1>
                  <div class="proname">
                    总用户
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="iconwrap">
                  <Icon size="24" color="#5553CE" type="money"></Icon>
                </div>
                <div class="iteminfo">
                  <h1>{{income}}</h1>
                  <div class="proname">
                    收入额
                  </div>
                </div>
              </div>
            </div>
          </Card>
          <Card style="width:400px">
            <p slot="title">
              <Icon type="social-buffer"></Icon>
              替代文字标题
            </p>
            <a href="#" slot="extra" @click.prevent="changeLimit">
              <Icon type="ios-loop-strong"></Icon>
            </a>
            <div class="carddemo complex">
              <div class="item">
                <div class="iconwrap">
                  <Icon size="24" type="person-birth"></Icon>
                </div>
                <div class="iteminfo">
                  <h1>1993年8月22日</h1>
                  <div class="proname">
                    生日
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="iconwrap">
                  <Icon size="24" color="#f63930" type="love"></Icon>
                </div>
                <div class="iteminfo">
                  <h1>有对象</h1>
                  <div class="proname">
                    个人情感关系状况
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="iconwrap">
                  <Icon size="24" color="#166aee" type="university"></Icon>
                </div>
                <div class="iteminfo">
                  <h1>大学本科</h1>
                  <div class="proname">
                    学历
                  </div>
                </div>
              </div>
              
              <div class="item">
                <div class="iconwrap">
                  <Icon size="24" color="#9407ff" type="sex"></Icon>
                </div>
                <div class="iteminfo">
                  <h1>女</h1>
                  <div class="proname">
                    性别
                  </div>
                </div>
              </div>
            </div>
          </Card>
        </div>
        <div slot="desc">
          <p>自定义标题、额外操作和主体内容，可以完全自由控制各个部分，也可以结合其它组件一起使用，较为灵活。</p>
          <p>
            <blockquote>2.12.0 版本开始，可以通过设置属性 <code>title</code> 和 <code>icon</code> 快速设置标题栏。</blockquote>
          </p>
        </div>
        <i-code lang="html" slot="code">{{ code.base }}</i-code>
      </Demo>
      <Demo title="无边框">
        <div slot="demo">
          <div style="background:#eee;padding: 20px">
            <Card :bordered="false" title="替代文字标题" icon="social-buffer">
              <a href="#" slot="extra" @click.prevent="changeLimit">
                <Icon type="ios-loop-strong"></Icon>
              </a>
              <div class="carddemo">
                <div class="item">
                  <div class="iconwrap">
                    <Icon size="24" color="#1875F0" type="all-user"></Icon>
                  </div>
                  <div class="iteminfo">
                    <h1>{{usercount}}</h1>
                    <div class="proname">
                      总用户
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="iconwrap">
                    <Icon size="24" color="#5553CE" type="money"></Icon>
                  </div>
                  <div class="iteminfo">
                    <h1>{{income}}</h1>
                    <div class="proname">
                      收入额
                    </div>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </div>
        <div slot="desc">
          <p>通过设置属性<code>bordered</code>为 false ，可以不添加边框，建议在灰色背景下使用。</p>
        </div>
        <i-code lang="html" slot="code">{{ code.bordered }}</i-code>
      </Demo>
      <Demo title="禁用悬停阴影">
        <div slot="demo">
          <Row>
            <Col span="24">
            <Card>
              <p slot="title">The standard card</p>
              <a href="#" slot="extra" @click.prevent="changeLimit">
                <Icon type="ios-loop-strong"></Icon>
              </a>
              <div class="carddemo">
                <div class="item">
                  <div class="iconwrap">
                    <Icon size="24" color="#1875F0" type="all-user"></Icon>
                  </div>
                  <div class="iteminfo">
                    <h1>{{usercount}}</h1>
                    <div class="proname">
                      总用户
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="iconwrap">
                    <Icon size="24" color="#5553CE" type="money"></Icon>
                  </div>
                  <div class="iteminfo">
                    <h1>{{income}}</h1>
                    <div class="proname">
                      收入额
                    </div>
                  </div>
                </div>
              </div>
            </Card>
            </Col>
            <Col span="24">
            <Card dis-hover>
              <p slot="title">Disable card with hover shadows</p>
              <a href="#" slot="extra" @click.prevent="changeLimit">
                <Icon type="ios-loop-strong"></Icon>
              </a>
              <div class="carddemo">
                <div class="item">
                  <div class="iconwrap">
                    <Icon size="24" color="#1875F0" type="all-user"></Icon>
                  </div>
                  <div class="iteminfo">
                    <h1>{{usercount}}</h1>
                    <div class="proname">
                      总用户
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="iconwrap">
                    <Icon size="24" color="#5553CE" type="money"></Icon>
                  </div>
                  <div class="iteminfo">
                    <h1>{{income}}</h1>
                    <div class="proname">
                      收入额
                    </div>
                  </div>
                </div>
              </div>
            </Card>
            </Col>
          </Row>
        </div>
        <div slot="desc">

          <p>通过设置属性<code>dis-hover</code>来禁用鼠标悬停显示阴影的效果。</p>
        </div>
        <i-code lang="html" slot="code">{{ code.disHover }}</i-code>
      </Demo>
      <Demo title="卡片阴影">
        <div slot="demo">
          <Row style="background:#eee;padding:20px">
            <Col span="24">
            <Card :bordered="false">

              <p slot="title">Borderless card</p>
              <a href="#" slot="extra" @click.prevent="changeLimit">
                <Icon type="ios-loop-strong"></Icon>
              </a>
              <div class="carddemo">
                <div class="item">
                  <div class="iconwrap">
                    <Icon size="24" color="#1875F0" type="all-user"></Icon>
                  </div>
                  <div class="iteminfo">
                    <h1>{{usercount}}</h1>
                    <div class="proname">
                      总用户
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="iconwrap">
                    <Icon size="24" color="#5553CE" type="money"></Icon>
                  </div>
                  <div class="iteminfo">
                    <h1>{{income}}</h1>
                    <div class="proname">
                      收入额
                    </div>
                  </div>
                </div>
              </div>
            </Card>
            </Col>
            <Col span="24">
            <Card shadow>
              <p slot="title">Use a card with a shadow effect</p>
              <a href="#" slot="extra" @click.prevent="changeLimit">
                <Icon type="ios-loop-strong"></Icon>
              </a>
              <div class="carddemo">
                <div class="item">
                  <div class="iconwrap">
                    <Icon size="24" color="#1875F0" type="all-user"></Icon>
                  </div>
                  <div class="iteminfo">
                    <h1>{{usercount}}</h1>
                    <div class="proname">
                      总用户
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="iconwrap">
                    <Icon size="24" color="#5553CE" type="money"></Icon>
                  </div>
                  <div class="iteminfo">
                    <h1>{{income}}</h1>
                    <div class="proname">
                      收入额
                    </div>
                  </div>
                </div>
              </div>
            </Card>
            </Col>
          </Row>
        </div>
        <div slot="desc">
          <p>通过设置属性<code>shadow</code>来显示卡片阴影，使用该属性后，<code>bordered</code>和<code>dis-hover</code>将无效，建议在灰色背景下使用。</p>
        </div>
        <i-code lang="html" slot="code">{{ code.shadow }}</i-code>
      </Demo>
      <Demo title="简洁卡片">
        <div slot="demo">
          <Card style="width:320px;">
            <div style="text-align:center">
              <div class="carddemo simpledemo">
                <div class="item">
                  <div class="iconwrap">
                    <Icon size="24" color="#fff" type="all-user"></Icon>
                  </div>
                  <div class="iteminfo">
                    <h1>{{usercount}}</h1>
                    <div class="proname">
                      总用户
                    </div>
                  </div>
                </div>
                <div class="item">
                  <ul class="bar">
                    <li v-for="item in barlist" :style="{height:item+'%'}"></li>
                  </ul>
                </div>
              </div>
            </div>
          </Card>
        </div>
        <div slot="desc">
          <p>只包含内容区域，没有标题。</p>
        </div>
        <i-code lang="html" slot="code">{{ code.simple }}</i-code>
      </Demo>
      <div class="api">
        <Anchor title="API" h2></Anchor>
        <Anchor title="Card props" h3></Anchor>
        <table>
          <thead>
            <tr>
              <th>属性</th>
              <th>说明</th>
              <th>类型</th>
              <th>默认值</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>bordered</td>
              <td>是否显示边框，建议在灰色背景下使用</td>
              <td>Boolean</td>
              <td>true</td>
            </tr>
            <tr>
              <td>dis-hover</td>
              <td>禁用鼠标悬停显示阴影</td>
              <td>Boolean</td>
              <td>false</td>
            </tr>
            <tr>
              <td>shadow</td>
              <td>卡片阴影，建议在灰色背景下使用</td>
              <td>Boolean</td>
              <td>false</td>
            </tr>
            <tr>
              <td>padding</td>
              <td>卡片内部间距，单位 px</td>
              <td>Number</td>
              <td>16</td>
            </tr>
            <tr>
              <td>title</td>
              <td>标题，2.12.0 新增</td>
              <td>String</td>
              <td>-</td>
            </tr>
            <tr>
              <td>icon</td>
              <td>标题前的图标，2.12.0 新增</td>
              <td>String</td>
              <td>-</td>
            </tr>
          </tbody>
        </table>
        <Anchor title="Card slot" h3></Anchor>
        <table>
          <thead>
            <tr>
              <th>名称</th>
              <th>说明</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>title</td>
              <td>自定义卡片标题，如果是简单文字，可以使用<code>&lt;p&gt;</code>标签包裹</td>
            </tr>
            <tr>
              <td>extra</td>
              <td>额外显示的内容，默认位置在右上角</td>
            </tr>
            <tr>
              <td>无</td>
              <td>卡片主体内容</td>
            </tr>
          </tbody>
        </table>
      </div>
    </article>
  </div>
</template>
<script>
import Demo from './demo/demo.vue';
import Anchor from './anchor.vue';
import iCode from './code/code';
import Code from './code/card';
export default {
  components: {
    iCode,
    Demo,
    Anchor
  },
  data() {
    return {
      code: Code,
      barlist:[10,20,58,80,70,40,60],
      usercount:2234,
      income:7244
    }
  },
  methods: {
    changeLimit() {
      let usercount = Math.random()*10000;
      let income = Math.random()*10000;
      this.usercount = parseInt(usercount);
      this.income = parseInt(income) 
    }
  }
}

</script>
